<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>flex复合属性</title>
    <style>
        .outer {
            width: 600px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;



        }

        .inner {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: skyblue;
            box-sizing: border-box;

            /* flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 100px; */

            /* 将grow,shrink,basis复合到一起 */
            /* flex: 1 1 auto; */



            /* 等价于 flex: 1 1 auto; */
            /* flex: auto; */


            /* 宽度从0进行拉伸，收缩也会收缩到仅剩内容,可简写为flex:1  这个用的相对多一些 */
            /* flex: 1 1 0; */

            /* 不换行也不压缩简写flex:none，用的少 */
            /* flex: 0 0 auto; */

            /* 这就是默认效果,不可拉伸，可压缩,简写flex:0 auto */
            flex: 0 1 auto;
        }
      
   
    

    </style>
</head>
<body>

<div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
</div>
<hr>

</body>
</html>